<template>
    <div class="photoinfo-container">
        <h4>{{ id }}由于没有对应的api无法获得对应标题时间和点击次数还有图片以及评论</h4>
        <p class="subtitle">
            <span>发表时间：{{ Date.now() | dateFormat }}</span>
            <span>点击次数：8888次</span>
        </p>
        <hr>
         <!-- 缩略图区域 -->
         <div class="thumbs" >
             <vue-preview :slides="list"
                         
             ></vue-preview>   
        
        </div>

         <!-- 图片内容区域 -->
         <div class="content">
             接下来该怎么办


         </div>

         <!-- 放置一个现成的评论子组件（图片资讯栏里的组件）-->
         <cmt-box :id="id"></cmt-box>

    </div>
</template>
<script>
//1.导入子组件
import comment from '../subcomponents/comment.vue'
import { Toast } from "mint-ui"
export default {
    data(){
        return{
            id:this.$route.params.t,
            photoinfo:[],
            // indexarray:[]
            list:[],//缩略图的数组
            
            
            
           
        }
    },
    created(){
        console.log(this.$route); //从路由中获取到的图片id
        this.getphotoinfo(1);
        this.getthumbs();
      
        
        
        
        
        
        

    },
    methods:{
        
        getphotoinfo(catetype){
              

            //获取图片的详情
            this.$http.get('https://www.apiopen.top/satinApi?type=' + catetype + '&page=1').then(result =>{
                console.log(result)
                if(result.status === 200){
                    
                    this.photoinfo = result.body.data
                    // var indexarray = this.photoinfo.map(item =>item.t);
                    // console.log(indexarray);
                    // var index = indexarray.indexOf(1519186682);
                    //  console.log(index)
                //    var a = [1,2,3,4,5,0,8];
                //    var min_index = a.indexOf(5);
                //    console.log(min_index)

                }else{
                    Toast('获取详情图片失败')
                }

            })
            

        },
        getthumbs(){
            //获取缩略图
            this.$http.get('https://www.easy-mock.com/mock/5c05f6478da5aa5aaa8b6076/vue').then(result =>{
                console.log(result)
                if(result.status === 200){
                    //循环缩略图的数组，并为每一个缩略图加上宽和高
                     result.body.data.slides.forEach(item => {
                         item.w = 600;
                         item.h = 400;
                         item.msrc = item.src = item.image
                         
                     });
                    
                   
                   
                    //把完整数据保存到list中
                    this.list =  result.body.data.slides;
                    
                   
                }

            })
        },
       
       

    },
     components:{ //注册评论子组件
            'cmt-box':comment
        }
    
}
</script>
<style lang="scss" scoped>
.photoinfo-container{
    padding:3px;
    h4{
        color: #26A2FF;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
}

</style>


